<template>
    <div class="user-order-details">
        <div>
            <mt-cell title="房间号">
                <span>1</span>
                <span slot="icon">&#xe600;</span>
            </mt-cell>
            <mt-cell title="期号">
                <span>{{orderData.issue_no}}</span>
                <span slot="icon">&#xe9b5;</span>
            </mt-cell>
            <mt-cell title="下注时间">
                <span>{{orderData.time}}</span>
                <span slot="icon">&#xe649;</span>
            </mt-cell>
            <mt-cell title="下注总金额">
                <span>{{orderData.amount}}</span>
                <span slot="icon">&#xe641;</span>
            </mt-cell>
            <mt-cell title="注单状态">
                <span v-if="orderData.status === 0">未确认</span>
                <span v-else-if="orderData.status === 1">已确认,未开奖</span>
                <span v-else-if="orderData.status === 2">已开奖</span>
                <span v-else-if="orderData.status === 3">已结算</span>
                <span v-else-if="orderData.status === 5">刷单,不入盘</span>
                <span v-else>已取消</span>
                <span slot="icon">&#xe652;</span>
            </mt-cell>
            <mt-cell title="收益" v-if="orderData.status === 3">
                <mt-badge type="error" v-if="orderData.profit >= 0">+{{orderData.profit}}</mt-badge>
                <mt-badge type="success" v-else>{{orderData.profit}}</mt-badge>
                <span slot="icon">&#xe610;</span>
            </mt-cell>
        </div>
        <div class="details">
            <div class="info">注单详细</div>
            <div class="th">
                <span class="mc">名次</span>
                <span>注码</span>
                <span>金额</span>
                <span>赔率</span>
            </div>
            <div class="td" v-for="item of orderData.betssArr">
                <span class="mc">{{item.itemStr}}</span>
                <span>{{item.number}}</span>
                <span>{{item.gold}}</span>
                <span>{{item.odds}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import apiUrl from '../../../api/apiUrl'
    import {Toast} from 'mint-ui'
    export default {
        name: "index",
        data () {
            return {
                orderData: {}
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData(to.query)
            })
        },
        methods: {
            setData(p) {
                let params = {
                    params: p
                }
                this.$http.get(apiUrl.api.orderDetails, params).then(res => {
                    if (res.data.code !== 0) {
                        Toast(res.data.msg)
                    } else {
                        let betss = []
                        res.data.result.betss.split(',').forEach(d => {
                            let arr = d.split('|')
                            betss.push({
                                item: arr[0],
                                itemStr: this.getNames(arr[0]),
                                number: arr[1],
                                gold: arr[2],
                                odds: arr[3]
                            })
                        })
                        res.data.result.betssArr = betss
                        this.$set(this, 'orderData', res.data.result)
                    }
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })
            },
            getNames(name) {
                switch (name) {
                    case '1':
                        return '冠军'
                    case '2':
                        return '亚军'
                    case '3':
                        return '季军'
                    case '4':
                        return '第四名'
                    case '5':
                        return '第五名'
                    case '6':
                        return '第六名'
                    case '7':
                        return '第七名'
                    case '8':
                        return '第八名'
                    case '9':
                        return '第九名'
                    case '10':
                        return '第十名'
                    case 'and':
                        return '冠、亚军和'
                }
            }
        }
    }
</script>

<style scoped lang="less">
@import "../../../assets/css/bases";

    .details {
        .info {
            height: 65px;
            line-height: 65px;
            text-align: center;
            color: @gray;
        }
        .th, .td {
            display: flex;
            justify-content: stretch;
            align-items: center;
            height: 35px;
            color: #999;
            span {
                width: 20%;
                text-align: center;
            }
            span.mc {
                width: 40%;
            }
        }
        .th {
            background: #f1f1f1;
        }
    }
</style>